<template>
    <div>
        <!-- 对数据操作  -->
        <div class="tool-rows">
            <el-input v-model="name" placeholder="请输入角色名" class="table-input" suffix-icon="el-icon-user"></el-input>
            <el-button type="success" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
        <div class="tool-rows">
            <el-button type="success" icon="el-icon-plus" @click="handleInsert">新增</el-button>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="handleBatchDelete"
                    title="确定删除选中角色吗?">
                <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin: 0 10px">批量删除</el-button>
            </el-popconfirm>
        </div>

        <!-- 表单区域  -->
        <el-table :data="tableData" header-cell-class-name="table-header" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="50">
            </el-table-column>
            <el-table-column prop="name" label="角色名称" width="120">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="identifier" label="标识">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-s-release" @click="handleAuthority(scope.row.id)">授权</el-button>
                    <el-button type="success" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="handleDelete(scope.row.id)"
                            title="确定删除该角色吗?">
                        <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left: 9px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条  -->
        <div class="tool-rows">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 角色信息编辑   -->
        <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%" custom-class="edit-dialog">
            <el-form :model="roleForm">
                <el-form-item label="角色名称" label-width="80px">
                    <el-input v-model="roleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" label-width="80px">
                    <el-input v-model="roleForm.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标识" label-width="80px">
                    <el-input v-model="roleForm.identifier" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 菜单授权  -->
        <el-dialog title="菜单授权" :visible.sync="authorityDialogVisible" width="30%" custom-class="edit-dialog">
            <el-tree
                    :data="menuAuthorityData"
                    show-checkbox
                    ref="menuTree"
                    node-key="id"
                    default-expand-all
                    :props="defaultProps">
                <span slot-scope="{ node, data }">
                    <span :class="data.icon"></span> {{ data.name }}
                </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="authorityDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAuthorityRelation">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { serverIp, serverPort } from "../../public/config";

    export default {
        name: "Role",
        data () {
            return {
                // 分页控件
                pageNumber: 1,
                pageSize: 5,
                total: 0,
                name: '',
                // 表格数据
                tableData: [],
                // 角色编辑
                dialogFormVisible: false,
                roleForm: {},
                multipleSelection: [],
                // 菜单授权
                roleId: 0,
                authorityDialogVisible: false,
                checkedMenuKeys: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                menuAuthorityData: [],
            }
        },
        created () {
            this.load()
        },
        methods: {
            // 分页加载
            load () {
                this.request.get('/role/page', {
                    params: {
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize,
                        name: this.name,
                    }
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNumber) {
                this.pageNumber = pageNumber
                this.load()
            },
            reset () {
                this.name = ''
                this.load()
            },
            // 菜单授权
            handleAuthority (id) {
                this.roleId = id
                this.authorityDialogVisible = true
                // 渲染数据
                this.request.get('/menu').then(res => {
                    this.menuAuthorityData = res.data
                })
                // 获取授权的菜单ID，并进行设置
                this.request.get('/role-menu/' + id).then(res => {
                    this.checkedMenuKeys = res.data.map(v => v.menuId)
                    this.$refs.menuTree.setCheckedKeys(this.checkedMenuKeys)
                })
            },
            saveAuthorityRelation () {
                this.request.post('/role-menu/' + this.roleId, this.$refs.menuTree.getCheckedKeys()).then(res => {
                    if (res.code === '200') {
                        this.$message.success('授权设置成功!')
                        this.authorityDialogVisible = false
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            // 新增
            handleInsert () {
                this.roleForm = {}
                this.dialogFormVisible = true
            },
            // 编辑
            handleEdit (row) {
                this.roleForm = row
                this.dialogFormVisible = true
            },
            // 删除
            handleDelete (id) {
                this.request.delete('/role/' + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleBatchDelete () {
                let ids = this.multipleSelection.map(v => v.id)
                this.request.post('/role/del/batch', ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('批量删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            save () {
                this.request.post('/role', this.roleForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success('保存成功!')
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            }
        }
    }
</script>

<style scoped>
    div.tool-rows {
        margin: 16px 0;
    }
    .table-input{
        display: inline-block;
        margin-right: 15px;
        width: 200px;
    }
    /deep/ .table-header {
        background-color: #E4E4E4 !important;
    }
    /deep/ .edit-dialog {
        border-radius: 12px !important;
    }
</style>